<template>
    <div class=''>
     <!-- accept=".png,.jpg" * 设置图片类型-->
     <!-- vant上传 -->
     <van-uploader :after-read="afterRead" />
     <!-- 进度条 -->
     <div class="pross" ref="pross"></div>
     <!-- 原生input -->
     <input type="file" @change="change">
 </div>
</template>

<script>
import http from "@/api/http"
export default {
    data() {
        return {};
    },
   created() {},
    methods: {
     change({target}){
         var file=target.files[0]
         this.afterRead({file})
        //  console.log();
     },
      afterRead({file}) {
      // 此时可以自行将文件上传至服务器
      //先判断大小
    //   if(file.size/1024>=30){
    //       return alert('超过30kb了')
    //   }

    //类型判断
    // if(!/image/.test(fail.type)){
    //     return alert('类型不对')
    // }

     //上传文件使用formData
      var data=new FormData()
       data.append('inputFile',file)
       var pross=this.$refs.pross;
       //发起提交
       http.post('up',data,{
           onUploadProgress(event){
            var value=Math.floor((event.loaded/event.total)*100)
            console.log(value);
            pross.innerHTML =value+'%'
            pross.style.width=value+'%'
           }
       })
       .then(({data})=>{
         console.log(data);
       })
     
    },
  
 },
    components:{}
};
</script>

<style lang='scss' scoped>
.pross{
     width: 0;
    height: 5px;
    background:red;
}
</style>
